<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.css">
    <style>
        .table{
            text-align: center;
        }
        #conint{
            line-height: 30px;
            margin-bottom: 20px;
            text-align: center;
            padding: 30px;
        }
        #edit{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="conint">
        <form>
                <div class="form-group">
                        <label for="exampleInputName2">名字</label>
                        <input type="text" class="form-control NameValue" id="exampleInputName2 " placeholder="名字" value="">
                      </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">邮箱</label>
                  <input type="email" class="form-control EmailValue" id="exampleInputEmail1 " placeholder="邮箱" value="">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">电话</label>
                    <input type="tel" class="form-control TelValue" id="exampleInputEmail1 " placeholder="电话" value="">
                  </div>
             
                <button type="submit" class="btn btn-default BthS">Submit</button>
        </form>
    </div>         
        <div class="table-responsive">
                <table class="table table-condensed table-bordered table-striped">
                    <thead>
                        <tr>
                            <td>
                                姓名
                            </td>
                            <td>
                                邮箱
                            </td>
                            <td>
                                电话
                            </td>
                            <td>
                                操作
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                      
                        
                    </tbody>
                </table>
              </div>
              <div id="edit">

              
              <form class="form-inline">
                <div class="form-group">
                    <label for="exampleNameEdit">姓名：</label>
                    <input type="text" class="form-control" id="exampleNameEdit" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label for="exampleTelEdit">邮箱：</label>
                    <input type="email" class="form-control" id="exampleTelEdit" placeholder="电话">
                </div>
                <div class="form-group">
                    <label for="exampleEmailEdit">电话：</label>
                    <input type="email" class="form-control" id="exampleEmailEdit" placeholder="邮箱">
                </div>
                <button type="submit" class="btn btn-default saveEdit">修改</button>
            </form>
        </div>


</body>
    <script>
        function log(a){
            console.log(a)
        }

       var tb = document.querySelector('.table');
       log(tb);
       var NameV = document.querySelector('.NameValue');
       log(NameV)
       var EmailV = document.querySelector('.EmailValue');
       log(EmailV)
       var TelV = document.querySelector('.TelValue');
       log(TelV )
       var BtS = document.querySelector('.BthS');
       log(BtS )
       var Tbody = document.querySelector('tbody');
       log(Tbody )
       var Amend = document.querySelector('.Amend');
       var Dleat = document.querySelector('.Dleat');
       var saveEdit = document.querySelector('.saveEdit')
       BtS.onclick = function (a){
           a.preventDefault();
           var obj = {};
           obj.name = NameV.value;
           obj.email = EmailV.value;
           obj.tel = TelV.value; 
           log(obj)
           var alr = localStorage.getItem('list2');
           if(alr){
            alr = JSON.parse(alr);
           
           alr.push(obj)
           console.log(alr)
           localStorage.setItem('list2',JSON.stringify(alr));
           }else{
            localStorage.setItem('list2', JSON.stringify([obj]));
           }
           Tbody.innerHTML += `
                            <tr>
                                <td>${obj.name}</td>
                                <td>${obj.email}</td>
                                <td>${obj.tel}</td>
                                <td>
                                    <button type="button" id="Amend" class="btn btn-primary btn-sm ">修改</button>
                            <button type="button" id="Dleat" class="btn btn-default btn-sm ">删除</button> 
                                </td>
                            </tr>
                        `

           
       }
    //    =============================
       apply ()
       function  apply (){
            var alr = localStorage.getItem('list2');
            alr = JSON.parse(alr);
            var str = ''
            alr.forEach(element => {
                console.log(element)
                str += `
                <tr>
                        <td>${element.name}</td>
                        <td>${element.email}</td>
                        <td>${element.tel}</td>
                        <td> 
                            <button type="button" id="Amend" class="btn btn-primary btn-sm ">修改</button>
                            <button type="button" id="Dleat" class="btn btn-default btn-sm ">删除</button> 
                        </td>
                </tr>
                `
            });
            Tbody.innerHTML += str;
       }
    //  ========================
         tb.addEventListener('click',function(e){
             var event = e || window.event;
             var target = event.target ||event.srcElement;
          log(target.ID)
             if(target.id == 'Dleat'){
                 var tr = target.parentNode.parentNode;
                 var index = tr.rowIndex-1;
                 tr.remove();
                 var alr = localStorage.getItem('list2');
                alr = JSON.parse(alr);
                alr.splice(index,1);
                 localStorage.setItem('list2',JSON.stringify(alr));
             }
         })
         //分析：修改  表单（加结构）  点击修改 当前行的内容要到你的修改表单中  修改内容  再保存   
         tb.addEventListener('click',function(e){
            var event = e || window.event;
            var target = event.target ||event.srcElement;
            log(target.id)
            if(target.id == 'Amend'){
                var tr = target.parentNode.parentNode;
                index = tr.rowIndex-1;
                var alr = localStorage.getItem('list2');
               alr = JSON.parse(alr);
                console.log(alr[index]);
                exampleNameEdit.value =alr[index].name;
                exampleTelEdit.value =alr[index].email;
                exampleEmailEdit.value =alr[index].tel;
            }
         })
         //修改并保存
         //修改  找objEdit   更改页面table  replaceChild(new,old)   splice(index,1,objEdit)
         saveEdit.onclick = function(e){
             e.preventDefault();
             var objEdit = {};
            //  console.log(index);
            objEdit.name =  exampleNameEdit.value;
            objEdit.tel = exampleTelEdit.value;
            objEdit.email = exampleEmailEdit.value;
            var newNode = document.createElement('tr');
            var str = `
                        <td>${objEdit.name}</td>
                        <td>${objEdit.email}</td>
                        <td>${objEdit.tel}</td>
                        <td>
                            <button type="button" id="Amend" class="btn btn-primary btn-sm ">修改</button>
                            <button type="button" id="Dleat" class="btn btn-default btn-sm ">删除</button> 
                        </td>`
            newNode.innerHTML = str;
           
            var oldNode = Tbody.rows[index]
            Tbody.replaceChild(newNode,oldNode);
            var alr = localStorage.getItem('list2');
            alr = JSON.parse(alr);
            alr[index] = objEdit;
            console.log(alr);
            localStorage.setItem('list2',JSON.stringify(alr));
         }
    </script>
</html>